<script setup> 
import { Edit, View, MoreFilled } from '@element-plus/icons-vue';
import { ref } from 'vue';
import GoodsStatus from '@/components/GoodsStatus.vue';


const activeName = ref('0');

const handleClick = (tab, event) => {
    console.log(tab, event);
};
</script>

<template>
    <div class="goods-details">
        <h1 class="goods-details-title">商品详情</h1>
        <div class="goods-info">
            <img class="goods-img" src="@/assets/recommending-img.png" alt="">
            <div class="goods-info-content">
                <div class="goods-name">
                    <p class="name">UI/UX/视觉品牌设计作品集辅导作品集重塑/作品集优化UI/UX/视觉品牌设计作品集辅导作品集重塑/作品集优化计件：讯飞高级设计师/7年视觉设计经验，擅长B端/官网/app设计计件：讯飞高级设计师/7年视觉设计经验，擅长B端/官网/app设计</p>
                    <div class="goods-tools">
                        <p class="tool">
                            <el-icon class="tool-icon"><Edit /></el-icon>
                            <span>编辑</span>
                        </p>
                        <p class="tool">
                            <el-icon class="tool-icon"><View /></el-icon>
                            <span>预览</span>
                        </p>
                        <p class="tool more">
                            <el-icon class="tool-icon"><MoreFilled /></el-icon>
                        </p>
                    </div>
                </div>
                <p class="goods-update-time">最近更新: 2023-11-12 13:19:11</p>
                <p class="goods-time">
                    <span class="goods-time-text">买家现在下单，我可以开始提供服务时间为</span>
                    <el-select class="goods-time-select">
                        <el-option value="1">48小时内</el-option>
                        <el-option value="2">72小时内</el-option>
                        <el-option value="3">96小时内</el-option>
                    </el-select>
                </p>
            </div>
        </div>
        <!-- 状态列表 -->
        <div class="status-list">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="全部动态" name="0">
                    <GoodsStatus itemData={} />
                </el-tab-pane>
                <el-tab-pane label="状态" name="1">状态</el-tab-pane>
                <el-tab-pane label="主页" name="2">主页</el-tab-pane>
                <el-tab-pane label="成交" name="3">成交</el-tab-pane>
                <el-tab-pane label="评价" name="4">评价</el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<style scoped lang="scss">
.goods-details{

}
.goods-details-title{
    font-size: 20px;
    font-weight: 600;
    color: #191E28;
    margin-bottom: 10px;
}
.goods-info{
    width: 100%;
    height: 177px;
    background: #FFFFFF;
    box-shadow: 0px 0px 16px 0px rgba(11,13,18,0.06);
    border-radius: 16px 16px 16px 16px;
    border: 1px solid rgba(25,30,40,0.08);
    padding: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    .goods-img{
        width: 200px;
        height: 130px;
        object-fit: cover;
        margin-right: 12px;
    }
    .goods-info-content{
        
    }
    .goods-name{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        .name{
            flex: 1;
            margin-right: 200px;
            font-size: 16px;
            font-weight: 500;
            color: #191E28;
            line-height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .goods-tools{
            display: flex;
            flex-direction: row;
            align-items: center;

            .tool{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-right: 20px;
                cursor: pointer;
                &:last-child{
                    margin-right: 0;
                }
                &:hover{
                    color: #1DBF73;
                }
                &.more{
                    font-size: 24px;
                }
                .tool-icon{
                    font-size: 12px;
                    margin-right: 6px;
                    font-weight: 600;   
                }
            }
        }
    }
    .goods-update-time{
        font-size: 12px;
        color: rgba(25,30,40,0.72);
    }
    .goods-time{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .goods-time-text{
            font-size: 12px;
            color: rgba(25,30,40,0.72);
            margin-right: 6px;
        }
        .goods-time-select{
            width: 160px;
        }
    }
}
.status-list{
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 0px 16px 0px rgba(11,13,18,0.06);
    border-radius: 16px 16px 16px 16px;
    border: 1px solid rgba(25,30,40,0.08);
    margin-top: 16px;
    padding: 10px 24px;
    box-sizing: border-box;
}
</style>

<style>
    .goods-time-select .el-select__wrapper{
        height: 40px;
    }
    .goods-time-select .el-select__input-wrapper{
        height: 40px;
    }
    .goods-time-select .el-select__input{
        height: 40px;
    }
    .status-list .el-tabs__active-bar{
        background-color: #1DBF73;
    }
    .status-list .el-tabs__item.is-active{
        color: #1DBF73;
    }
    .status-list .el-tabs__item:hover{
        color: #1DBF73;
    }
</style>